<script setup>
import { ref, defineProps, reactive, watch, nextTick,toRaw } from 'vue';
import DropDownList from './dropDownList.vue';
import tableItemVue from './tableItem.vue';
let props = defineProps({
    data: {
        type: Array,
        required: true
    },
    delete: {
        type: Function,
        default: null
    },
    edit: {
        type: Function,
        default: null
    },
    select:{
        type: Function,
        default:null
    }
})

let tableHead = reactive([])

//强制刷新
let isShow = ref(true)
//th刷新
watch(props, (val) => {
    tableHead.length = 0;
    tableHead.push(...Object.keys(val.data[0] ?? []))
    //强制刷新子组件
    isShow.value = false
    nextTick(() => {
        isShow.value = true
    })
}, { immediate: true })


//table delete,edit功能实现
let dropDown = ref(null)
let delItem;
function deleteItem(e, item) {
    dropDown.value.show(e, 'top')
    delItem = toRaw(item)
}
</script>

<template>
    <table>
        <DropDownList ref="dropDown">
            <div style="display: flex; flex-direction: column;align-items: center;">
                <button danger @click="props.delete(delItem);dropDown.show()">确定删除?</button>
            </div>
        </DropDownList>
        <tr>
            <th v-if="props.select!=null" >选择</th>
            <template v-for="(item, index) in tableHead" :key="index">
                <th>{{ item }}</th>
            </template>

            <th v-if="(props.edit != null || props.delete != null)"> <i>&#xe8d0;</i></th>
        </tr>
        <template v-for="(item, index) in data" :key="index">
            <tr :class="((index % 2) == 0 ? '' : 'tableRow')">
                <td v-if="props.select!=null" >
                    <input type="checkbox" @click="props.select($event,item)">
                </td>
                <template v-for="(head, hindex) in tableHead" :key="hindex">
                    <tableItemVue :data="item[head]" v-if="isShow"></tableItemVue>
                </template>
                <td>
                    <div class="option">
                        <button v-if="props.edit != null" @click="props.edit(item)">编辑</button>
                        <button v-if="props.delete != null" @click="deleteItem($event,item)" danger>删除</button>
                    </div>
                </td>
            </tr>

        </template>
        <h3 v-if="data.length == 0">没有任何数据...</h3>
    </table>
</template>

<style scoped>
table {
    border-spacing: 0;
    width: 100%;
    border: .1em solid var(--color-theme);
    border-radius: .5em;
    color: var(--color-text-second);
}

th {
    background-color: var(--color-theme);
    position: sticky;
    color: var(--color-text-light-first);
    padding: .5em .5em;
}

th>td {
    user-select: none;
    cursor: pointer;
}

td {
    max-width: 10em;
    text-align: center;
    /* border-radius: .1em; */
}

tr:hover {
    background-color: rgba(0, 0, 0, 0.09);
}

.tableRow {
    background-color: rgba(0, 0, 0, 0.05);
}

.option>button {
    transform: scale(.7);
}

.option {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>